<!--#
layout("/layouts/platform.html"){
#-->
<style>
    .el-upload input[type=file] {
        display: none;
    }

    .el-upload__text {
        color: #606266;
        font-size: 14px;
        text-align: center;
    }
</style>
<div id="app"  v-cloak>
    <!--<div class="head"><div class="headone"><i class="el-icon-menu"></i><span >报告模板</span></div></div>-->
    <el-row class="header navbar bg-white">
        <div class="btn-group tool-button" style="line-height: 50px;">
            模板名称：<el-input placeholder="模板名称" v-trim v-model="pageForm.reportTemplateName" size="mini" style="width:180px;"
                      clearable></el-input>
            产品类型：<el-cascader placeholder="产品类型" v-trim v-model="pageForm.productType" :props="{ checkStrictly: true }" :options="allMap.yplxOptions" size="mini" clearable></el-cascader>
            <el-button slot="append" icon="el-icon-search" size="mini" @click="doSearch" circle></el-button>
        </div>
        <div class="pull-right offscreen-right" style="margin-right: 20px;line-height: 50px;">
             <el-tooltip class="item" effect="dark" content="新增模板">
                    <el-button type="primary" icon="el-icon-plus"  size="mini" @click="openAddDialog" circle></el-button>
             </el-tooltip>
        </div>
    </el-row>

    <el-row class="el-table-container">
        <el-table :data="tableData" @sort-change='pageOrder' height="520"  border size="small" header-align="center"  style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column sortable="custom" prop="infoname" label="模板名称" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="producttype" label="产品类型" min-width="120px;" header-align="center" align="center" style="word-break: break-all;" show-overflow-tooltip>
                <template slot-scope="scope" >
                    <span>
                    {{getDict(scope.row.producttype,allMap.yplxMap)}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column sortable="custom" prop="infoversion" label="版本号" min-width="100px;" header-align="center" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="filebeforename" label="文件名" min-width="120px;" header-align="center" align="left" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-link type="primary" :href="'${AppFileDomain}${AppUploadBase}'+scope.row.filepath">{{scope.row.filebeforename}}</el-link>
                </template>
            </el-table-column>
            <el-table-column sortable="custom" prop="remark" label="备注" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="username" label="创建人" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>

            <el-table-column sortable="custom" prop="disabled" label="状态" min-width="50px;"  header-align="center" align="center" >
                <template slot-scope="scope">
                    <i v-if="scope.row.disabled" class="fa fa-circle text-danger ml5"></i>
                    <i v-if="!scope.row.disabled" class="fa fa-circle text-success ml5"></i>
                </template>
            </el-table-column>
            <el-table-column
                    prop="note"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-dropdown @command="dropdownCommand">
                        <el-button size="mini">
                            <i class="ti-settings"></i>
                            <span class="ti-angle-down"></span>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{type:'viewReport',id:scope.row.id,row:scope.row}">
                                查看
                            </el-dropdown-item>
                            <el-dropdown-item divided :command="{type:'edit',id:scope.row.id,row:scope.row}">
                                修改
                            </el-dropdown-item>
                            <el-dropdown-item divided :command="{type:'enable',id:scope.row.id,row:scope.row}">
                                启用
                            </el-dropdown-item>
                            <el-dropdown-item :command="{type:'disable',id:scope.row.id,row:scope.row}">
                                禁用
                            </el-dropdown-item>
                            <el-dropdown-item divided :command="{type:'delete',id:scope.row.id,row:scope.row}">
                                删除
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row class="el-pagination-container">
        <el-pagination @size-change="pageSizeChange" @current-change="pageNumberChange" :current-page="pageForm.pageNumber" :page-sizes="[10, 20, 30, 50]"
                       :page-size="pageForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageForm.totalCount">
        </el-pagination>
    </el-row>

    <el-dialog :close-on-click-modal="false" append-to-body style="margin-left: 160px;"  title="报告模板"  :visible.sync="addDialogVisible" width="80%">
        <el-form id="addForm"  :rules="formRules" :model="formData" ref="addForm"  size="small" label-width="80px">
            <el-form-item prop="infoName" label="模板名称" style="width: 60%">
                <el-cascader v-model="formData.infoName" :options="allMap.templateNameOptions"></el-cascader>
            </el-form-item>
            <el-form-item prop="productType" label="产品类型" style="width: 60%">
                <el-cascader v-model="formData.productType" :options="allMap.yplxOptions" :props="{ multiple: true }" collapse-tags></el-cascader>
            </el-form-item>
            <el-form-item prop="infoVersion"  label="版本号" style="width: 60%">
                <el-input maxlength="20" placeholder="版本号不可用特殊字符" v-trim v-model="formData.infoVersion" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="备注" style="width: 60%">
                <el-input maxlength="50" placeholder="备注" v-trim v-model="formData.remark"  type="text"></el-input>
            </el-form-item>
            <el-form-item prop="filePath" label="模板文件">
                <el-upload
                        class="upload-demo"
                        drag
                        action="${base}/open/file/upload/file"
                        name="Filedata"
                        :show-file-list="false"
                        :before-upload="beforeOfficeUpload"
                        :on-success="function(resp,file,fileList){return handleOfficeSuccess(resp,file,fileList)}"
                        :on-progress="uploadFileProcess"
                        style="height:180px;"
                >
                    <i class="el-icon-upload" v-if="!fileUploadFlag"></i>
                    <div class="el-upload__text" v-if="!fileUploadFlag">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传 word 文件，且不超过5MB</div>
                    <el-progress v-if="fileUploadFlag == true" type="circle" :percentage="fileUploadPercent" style="margin-top:20px;"></el-progress>
                </el-upload>
                <div v-if="formData.fileSize>0" style="color: green;font-size: 14px;">
                    文件名: {{formData.fileBeforeName}} &nbsp; &nbsp; 文件大小: {{(formData.fileSize/1024/1024).toFixed(2)}}MB
                </div>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="doAdd">确 定</el-button>
        </span>
    </el-dialog>
    <el-drawer :wrapperClosable="false" :title="drawerTitle" :visible.sync="drawer" direction="rtl" size="80%" @opened="openIframe" destroy-on-close>
        <iframe id="viewIframe"  src="" width="100%" height="100%" frameborder="0" marginheight="0" ></iframe>
    </el-drawer>
</div>
<style scoped>
    .el-table--border th.gutter:last-of-type {
        display: block !important;
        width: 17px !important;
    }

</style>
<script>
    new Vue({
        el: "#app",
        data: function () {
            var allMap = {templateNameOptions:${templateNameOptions},yplxOptions:${yplxOptions},yplxMap:${yplxMap}};
            return {
                allMap:allMap,
                tableData: [],
                addDialogVisible:false,
                pageForm: {},
                formData: {
                    id: "",
                    productType:"",
                    infoType:"template",
                    fileSize: 0,
                    fileType:"",
                    fileBeforeName:"",
                    fileName:"",
                    filePath: "",
                    fileUrl:""
                },
                formRules: {
                    infoName: [
                        {required: true, message: '模板名称', trigger: ['blur', 'change']}
                    ],
                    productType: [
                        {required: true, message: '产品类型', trigger: ['blur', 'change']}
                    ],
                    infoVersion: [
                        {required: true, message: '版本号', trigger: ['blur', 'change']}
                    ],
                    filePath: [
                        {required: true, message: '上传文件', trigger: ['blur', 'change']}
                    ],
                    fileName: [
                        {required: true, message: '上传文件', trigger: ['blur', 'change']}
                    ],
                    fileUrl: [
                        {required: true, message: '上传文件', trigger: ['blur', 'change']}
                    ],
                    fileBeforeName: [
                        {required: true, message: '上传文件', trigger: ['blur', 'change']}
                    ],
                    fileType: [
                        {required: true, message: '上传文件', trigger: ['blur', 'change']}
                    ],
                },
                fileList:null,
                fileUploadFlag:false,//是否正在上传
                fileUploadPercent:0,
                drawer:false,
                drawerTitle:"",
                drawerIFrameUrl:""
            }
        },
        methods: {
            beforeOfficeUpload: function (file) {
                var isLt5M = file.size / 1024 / 1024 < 5;
                var type= file.name.substring(file.name.lastIndexOf("."), file.name.length);
                this.$set(this.formData, "fileBeforeName",file.name);
                if (!(".docx" ==type)) {
                    this.$message.error('只可上传 docx 后缀 word文件');
                    return false;
                }
                if (!isLt5M) {
                    this.$message.error('文件大小不能超过5MB');
                    return false;
                }
                return true;
            },
            handleOfficeSuccess: function (response, file, fileList) {
                if (response.code == 0) {
                    // 对象属性直接赋值不会触发试图更新，采用 Vue.set 、this.$set或者Object.assign({}，this.obj)创建新对象
                    // 或者也可以定义一个 refresh 属性 ，当数据发生改变时，该属性同时变化，也会触发视图更新
                    this.$set(this.formData, "fileSize", response.data.file_size);
                    this.$set(this.formData, "filePath", response.data.file_path);
                    this.$set(this.formData, "fileType", response.data.file_type);
                    this.$set(this.formData, "fileUrl", response.data.file_url);
                    this.$set(this.formData, "fileName", response.data.file_name);
                } else {
                    this.$message({
                        message: response.msg,
                        type: 'error'
                    });
                    this.$set(this.formData, "fileSize", 0);
                    this.$set(this.formData, "filePath", "");
                    this.$set(this.formData, "fileType", "");
                    this.$set(this.formData, "fileUrl", "");
                    this.$set(this.formData, "fileName", "");
                }
                this.fileUploadFlag=false;
            },
            //进度条
            uploadFileProcess:function(event, file, fileList){
                this.fileUploadFlag=true;
                this.fileUploadPercent = parseInt(event.percent);
            },
            doAdd: function () {
                var self = this;
                self.$refs["addForm"].validate(function (valid) {
                    if(nONull(self.formData.infoName)){self.formData.infoName=self.formData.infoName.join(",");}
                    if(nONull(self.formData.productType)){self.formData.productType=self.formData.productType.join("-");}
                    if (valid) {
                        var url = "/platform/bus/report_template/addDo";
                        if(nONull(self.formData.id)){
                            url = "/platform/bus/report_template/editDo";
                        }
                        $.post(base + url, self.formData, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.addDialogVisible = false;
                                self.pageData();
                            } else {
                                if(nONull(self.formData.infoName)){self.formData.infoName=self.formData.infoName.split(",");}
                                if(nONull(self.formData.productType)){self.formData.productType=self.formData.productType.split("-");}
                                const typeList = data.data;
                                var msg = "";
                                typeList.forEach((item)=>{
                                    msg+="【"+self.getDict(item,self.allMap.yplxMap)+"】   "
                                })
                                self.$message({
                                    message: msg+data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            formatAt: function (val) {
                if (val > 0)
                    return moment(val * 1000).format("YYYY-MM-DD HH:mm");
                return "";
            },
            openAddDialog:function(){
                this.addDialogVisible=true;
                this.formData = {
                    id: "",
                    productType:[],
                    infoType:"template",
                    fileSize: 0,
                    fileType:"",
                    fileBeforeName:"",
                    fileName:"",
                    filePath: "",
                    fileUrl:""
                };//打开新增窗口,表单先清空
                if (this.$refs["addForm"])
                    this.$refs["addForm"].resetFields();
            },
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                if(nONull(self.pageForm.productType)){self.pageForm.pType=self.pageForm.productType.join(",");}

                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/report_template/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },

            dropdownCommand: function (command) {//监听下拉框事件
                var self = this;
                if ("enable" == command.type || "disable" == command.type) {
                    $.post(base + "/platform/bus/report_template/" + command.type + "/" + command.id, {}, function (data) {
                        if (data.code == 0) {
                            self.$message({
                                message: data.msg,
                                type: 'success'
                            });
                            if ("disable" == command.type) {
                                command.row.disabled=true;
                            }
                            if ("enable" == command.type) {
                                command.row.disabled=false;
                            }
                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }, "json");
                }

                if ("delete" == command.type) {
                    self.$confirm('此操作将删除模板 ' + command.row.filebeforename, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        callback: function (a, b) {
                            if ("confirm" == a) {//确认后再执行
                                $.post(base + "/platform/bus/report_template/delete/" + command.id, {}, function (data) {
                                    if (data.code == 0) {
                                        self.$message({
                                            message: data.msg,
                                            type: 'success'
                                        });
                                        self.doSearch();
                                    } else {
                                        self.$message({
                                            message: data.msg,
                                            type: 'error'
                                        });
                                    }
                                }, "json");
                            }
                        }
                    });
                }
                if("edit" == command.type){//修改
                    //根据id获取数据
                    $.post(base + "/platform/bus/report_template/detail/" + command.id, {}, function (data) {
                        if (data.code == 0) {
                            self.formData =  data.data;
                            if(nONull(self.formData.infoName)){self.formData.infoName=self.formData.infoName.split(",");}
                            if(nONull(self.formData.productType)){self.formData.productType=self.formData.productType.split("-");}
                        } else {
                            self.$message({message: data.msg,type: 'error'});
                        }
                    }, "json");
                    //打开窗口
                    this.addDialogVisible=true;
                }
                if ("viewReport" == command.type) {
                    self.drawer = true;
                    self.drawerTitle = "查看模板:" + command.row.filebeforename;
                    var WOPISrc = "${AppDomain!}/platform/wopi/files/" + command.row.filename+".docx";
                    //this.wordURL="${AppOfficeDomain!}/wv/wordviewerframe.aspx?WOPISrc="+WOPISrc;
                    //self.deltailURL="${AppOfficeDomain!}/wv/WordViewer/request.pdf?type=printpdf&WOPISrc="+WOPISrc+"&_="+Math.floor(Math.random()*100000);
                    self.drawerIFrameUrl = "${AppOfficeDomain!}/wv/wordviewerframe.aspx?wdAccPdf=1&WOPISrc=" + WOPISrc + "&_=" + Math.floor(Math.random() * 100000);
                }
            },
            getDict: function (val,map) {
                if (val!= null && val!=undefined &&val!="" &&val!="null" &&val!="undefined" && map!=null && map !=undefined){
                    var str = val.split(",");
                    var strname="";
                    if(val.indexOf("-")!=-1){
                        str = val.split("-");
                        for (var a=0;a<str.length;a++) {
                            strname += this.getDict(str[a],map);
                            if(a<(str.length-1)){
                                strname+="，";
                            }
                        }
                    }else{
                        for (var a=0;a<str.length;a++){
                            strname+=map[str[a]];
                            if(strname == null){

                            }
                            if(a<(str.length-1)){
                                strname+="/";
                            }
                        }
                    }
                    return strname;
                }
                return "";
            },
            openIframe:function(){
                $("#viewIframe").attr("src",this.drawerIFrameUrl);
            },
            handleSelectionChange: function (val) {
                this.multipleSelection = val;
            }
        },
        created: function () {
            this.doSearch();
        }
    });

    function nONull(val){
        if (val!= null && val!=undefined &&val!="" &&val!="null" &&val!="undefined" ){
            return true;
        }else{
            return false;
        }
    }
</script>
<!--#
}
#-->
